<template>
  <div class="goodsDetail">
    <el-container>
      <el-header>
      </el-header>
      <el-container>
        <!-- 左侧图片 -->
        <el-aside width="50%">
          <img :src="selectedItem.src" :alt="selectedItem.title" class="item_img"/>
          <el-rate
            class="itemRate"
            v-model="selectedItem.rateValue"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
          </el-rate>
        </el-aside>
        <!-- 右侧表单 -->
        <el-main>
          <div class="item-Title"><span style="font-size: 26px;color: #000000;font-weight: 600;">{{ selectedItem.title }}</span></div>
          <div class="item-Description"><span style="font-size: 12px;color: #000000;font-weight: 300;">{{ selectedItem.description }}</span></div>
          <div class="item-Price"><span style="font-size: 25px;color: #FF0000;font-weight: 500;">{{ selectedItem.price }}</span></div>
          <el-form ref="form" :model="form" label-width="100px" label-position="left">
            <!-- <el-form-item :label="selectedItem.title" label-width="100%" style="font-color: #000000;"></el-form-item> -->
            <el-form-item v-if="selectedItem.type===1" label="网络类型">
              <el-radio v-model="formItem.netType" label="1" border>电信</el-radio>
              <el-radio v-model="formItem.netType" label="2" border>移动</el-radio>
              <el-radio v-model="formItem.netType" label="3" border>联通</el-radio>
              <el-radio v-model="formItem.netType" label="4" border>全网</el-radio>
            </el-form-item>
            <el-form-item v-if="selectedItem.type===1" label="颜色分类">
              <el-radio v-model="formItem.color" label="1" border>亮蓝</el-radio>
              <el-radio v-model="formItem.color" label="2" border>玉白</el-radio>
              <el-radio v-model="formItem.color" label="3" border>焕蓝</el-radio>
            </el-form-item>
            <el-form-item v-if="selectedItem.type===1" label="内存容量">
              <el-radio v-model="formItem.ram" label="1" border>4+64GB</el-radio>
              <el-radio v-model="formItem.ram" label="2" border>6+64GB</el-radio>
              <el-radio v-model="formItem.ram" label="3" border>6+128GB</el-radio>
            </el-form-item>
            <el-form-item v-if="selectedItem.type===2" label="型号">
              <el-radio v-model="formItem.ram" label="1" border>EP51</el-radio>
              <el-radio v-model="formItem.ram" label="2" border>EP52</el-radio>
            </el-form-item>
            <el-form-item v-if="selectedItem.type===2" label="颜色分类">
              <el-radio v-model="formItem.ram" label="1" border>蓝色</el-radio>
              <el-radio v-model="formItem.ram" label="2" border>红色</el-radio>
            </el-form-item>
            <el-form-item label="数量">
              <el-input-number v-model="formItem.takeNum" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即购买</el-button>
              <el-button>加入购物车</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </el-container>
    <!-- 以下详情 -->
    <div>
      <div>
        服务说明
      </div>
      <div>
        <img src="../../static/images/serviceInfo.jpg"/>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  data () {
    return {
      formItem: {
        netType: '1',
        color: '1',
        ram: '1',
        takeNum: 1
      }
    }
  },
  computed: mapGetters({
    selectedItem: 'getSelectedGoods'
  }),
  methods: {
    changeSelectedItem (item) {
      this.$store.dispatch('changeSelectedItem', item)// 改变进入商品
    }
  }
}
</script>

<style scoped>
.goodsDetail {
  background: #FFFFFF
}
.item_img {
  margin-left: 333px;
  width: 370px;
  height: 400px;
}
.itemRate {
  width: 370px;
  margin-left: 333px;
  margin-top: 20px;
}
.item-Title {
  line-height: 40px;
  text-align: left;
  height: 40px;
  padding: 0px;
}
.item-Description {
  line-height: 40px;
  text-align: left;
  height: 40px;
  padding: 0px;
}
.item-Price {
  line-height: 40px;
  text-align: left;
  height: 40px;
  padding: 0px;
}
</style>
